<template>
    <div id="TAreamain"></div>
  </template>
  
  <script>
  
  import * as echarts from 'echarts/core';
import { TitleComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
  export default {
    mounted() {
echarts.use([
  TitleComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);

var chartDom = document.getElementById('TAreamain');
var myChart = echarts.init(chartDom);
var option;

const chartData = [
  {
    value: 135,
    name: '理科'
  },
  {
    value: 165,
    name: '工科'
  },
  {
    value: 36,
    name: '医科'
  },
  {
    value: 79,
    name: '人文社科'
  },
  {
    value: 46,
    name: '艺术与设计'
  }
];
const color = [
  '#975fe4',
  '#45a5ff',
  '#81c926',
  '#7585a2',
  '#fad337',
  '#f2637b'
];
let sum = chartData.reduce((per, cur) => per + cur.value, 0);
option = {
  title: {
    show: true,
    text: '教师总数',
    subtext: sum,
    x: '24%',
    y: '38%',
    textStyle: {
      color: '#79E2F9',
      fontSize: 15,
      fontWeight: '400'
    },
    subtextStyle: {
      color: 'rgba(121, 226 ,249,0.85)',
      fontSize: 18,
      fontWeight: '400'
    },
    textAlign: 'center'
  },
  legend: {
    orient: 'vertical',
    icon: 'circle',
    // 四列的样式
    textStyle: {
      color: '#373737',
      fontSize: '15px',
      rich: {
        name: {
          color: 'rgba(121, 226 ,249,1)',
          fontSize: 13,
          width: 120,
          fontWeight: 400,
          padding: [0, 0, 0, 2]
        },
        symbol: {
          color: 'rgba(255,255,255,1)',
          fontSize: 13,
          fontWeight: 400,
          padding: [0, 0, 0, -40]
        },
        percent: {
          color: 'rgba(255,255,255,1)',
          fontSize: 13,
          fontWeight: 400,
          width: 60,
          padding: [0, 0, 0, 4]
        },
        value: {
          color: 'rgba(255,255,255,1)',
          fontSize: 13,
          fontWeight: 400,
          padding: [0, 0, 0, -15]
        }
      }
    },
    //图标样式
    top: 'center',
    right: '5%',
    itemGap: 5,
    itemHeight: 18,
    itemWidth: 18,
    data: chartData.map((item) => item.name), // 修改此处
    formatter: function (name) {
      let obj = {};
      if (name) {
        obj = chartData.find((item) => item.name === name);
      }
      return `{name|${name}}{symbol| |}{percent|${
        obj.value && ((obj.value / sum) * 100).toFixed(0)
      }%}{value|${obj.value || 0}}`;
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      roundCap: true,
      radius: ['45%', '70%'],
      center: ['25%', '50%'],
      startAngle: 180, //起始角度
      data: chartData,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2.5,
        borderRadius:'5px',
        color: function (params) {
          return color[params.dataIndex];
        }
      },
      labelLine: {
        length: 8,
        length2: 16,
        lineStyle: {
          width: 1
        }
      },
      label: {
        show: false,
        fontFamily: 'ysbth',
        position: 'outside',
        padding: [0, -4, 0, -4],
        formatter(params) {
          if (params.name === '') {
            return '';
          }
          return `${params.percent.toFixed(0)}%`;
        },
        color: '#fff',
        fontSize: '14px',
        lineHeight: 10
      }
    }
  ]
};

option && myChart.setOption(option);

    }
}
  </script>
<style scoped>
#TAreamain{
  width: 400px;
  height: 200px;
}
</style>  